<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>任务列表</title>
    <link rel="stylesheet" href="../../component/pear/css/pear.css"/>
</head>
<body class="pear-container">
<div class="layui-card">
    <div class="layui-card-body">
        <div class="layui-tab layui-tab-card" lay-filter="test">
            <ul class="layui-tab-title">
                <li class="layui-this">待办任务</li>
                <li>已办任务</li>
            </ul>
            <div class="layui-tab-content">
                <div class="layui-tab-item layui-show">
                    <table style="margin-top: 10px;" id="todo-list-table" lay-filter="user-table-todo"></table>
                </div>
                <div class="layui-tab-item">
                    <table style="margin-top: 10px;" id="done-list-table" lay-filter="user-table-done"></table>
                </div>
            </div>
        </div>
    </div>
</div>
</body>

<script type="text/html" id="lct-bar">
    <button class="pear-btn pear-btn-primary pear-btn-sm" lay-event="edit">流程图
    </button>
    <!--    <button class="pear-btn pear-btn-danger pear-btn-sm" lay-event="remove"><i class="layui-icon layui-icon-delete"></i>-->
    <!--    </button>-->
</script>

<script type="text/html" id="todo-bar">
    <button class="pear-btn pear-btn-sm pear-btn-success" lay-event="agree">同意
    </button>
    <button class="pear-btn pear-btn-sm pear-btn-warming" lay-event="refuse">驳回
    </button>
</script>

<script src="../../component/layui/layui.js"></script>
<script src="../../component/pear/pear.js"></script>
<script>
    layui.use(['table', 'form', 'jquery', 'element', 'easyAdmin'], function () {
        let table = layui.table;
        let form = layui.form;
        let $ = layui.jquery;
        let element = layui.element;
        var easyAdmin = layui.easyAdmin;
        let todoCols = [
            [
                {title: '流程编号', field: 'orderNo', align: 'center'},
                {title: '任务节点', field: 'taskName', align: 'center'},
                {title: '任务到达时间', field: 'taskCreateTime', align: 'center'},
                {title: '流程名称', field: 'processName', align: 'center'},
                {title: '操作', toolbar: '#todo-bar', align: 'center', width: 150}
            ]
        ]

        let doneCols = [
            [
                {title: '流程编号', field: 'orderNo', align: 'center'},
                {title: '任务节点', field: 'taskName', align: 'center'},
                {title: '任务到达时间', field: 'taskCreateTime', align: 'center'},
                {title: '任务完成时间', field: 'taskEndTime', align: 'center'},
                {title: '流程名称', field: 'processName', align: 'center'},
                {title: '操作', toolbar: '#lct-bar', align: 'center', width: 150}
            ]
        ]

        easyAdmin.tableRender({
            elem: '#todo-list-table',
            url: '/flow/task/todoList',
            page: true,
            cols: todoCols,
            skin: 'line',
            toolbar: false
        });

        easyAdmin.tableRender({
            elem: '#done-list-table',
            url: '/flow/task/doneList',
            page: true,
            cols: doneCols,
            skin: 'line',
            toolbar: false
        });

        table.on('tool(user-table-done)', function (obj) {
            if (obj.event === 'remove') {
                window.remove(obj);
            } else if (obj.event === 'edit') {
                window.edit(obj);
            }
        });

        table.on('tool(user-table-todo)', function (obj) {
            if (obj.event === 'agree') {
                window.agree(obj);
            } else if (obj.event === 'refuse') {
                window.refuse(obj);
            }
        });

        //监听Tab切换，以改变地址hash值
        element.on('tab(test)', function (data) {
            if (data.index == 0) {
                table.reload('todo-list-table')
            }

            if (data.index == 1) {
                table.reload('done-list-table')
            }
        });

        window.edit = function (obj) {
            var data = obj.data;
            layer.open({
                type: 2,
                title: '查看流程图',
                shade: 0.1,
                area: ['980px', '500px'],
                content: ['../flow/diagram.html?orderId=' + data.orderId + "&processId=" + data.processId, 'no']
            });
        }
        form.on('submit(dict-type-query)', function (data) {
            table.reload('dict-type-table', {where: data.field})
            return false;
        });

        window.agree = function (obj) {
            easyAdmin.http({
                url: "/flow/task/approval?taskId=" + obj.data['id'],
                dataType: 'json',
                type: 'get',
                success: function () {
                    table.reload('todo-list-table')
                }
            })
        }

        window.refuse = function (obj) {
            easyAdmin.http({
                url: "/flow/task/rejectToCreate?taskId=" + obj.data['id'],
                dataType: 'json',
                type: 'get',
                success: function () {
                    table.reload('todo-list-table')
                }
            })
        }

        window.error = function (obj) {
            layer.open({
                type: 1,
                title: '异常信息',
                shade: 0,
                area: ['450px', '350px'],
                content: '<div class="pear-container"><div class="layui-card"><div class="layui-card-body">' + obj.data['error'] + '</div></div></div>'
            });
        }
    })
</script>
</html>